<template>
  <div class="page-cell">
    <mt-field label="试飞科目" placeholder="请输入试飞科目" v-model="item.subject"
              :text="item.subject"><span style="color: red">*</span></mt-field>

    <mt-field label="执行试验点数" placeholder="请输入执行试验点数" v-model="item.points" type="number" :attr="{ maxlength: 8 }"
              :text="item.points"></mt-field>

    <div v-on:click="open('picker1')" v-on:closepop="closepop">
      <mt-cell title="起飞时间" :label="item.takeOffTime" is-link><span style="color: red">*</span></mt-cell>
    </div>
    <div v-on:click="open('picker2')" v-on:closepop="closepop">
      <mt-cell title="着陆时间" :label="item.landingTime" is-link><span style="color: red">*</span></mt-cell>
    </div>
    <div v-on:click="seen2" v-on:closepop="closepop2">
      <mt-cell title="起飞机场" :label="item.takeOffAirport" is-link><span style="color: red">*</span></mt-cell>
    </div>
    <div v-on:click="seen3" v-on:closepop="closepop3">
      <mt-cell title="着陆机场" :label="item.landingAirport" is-link><span style="color: red">*</span></mt-cell>
    </div>

    <mt-cell title="空中飞行时间" :label="item.flightTime"><span style="color: #666">分钟</span><span
      style="color: red">*</span></mt-cell>
    <mt-field label="开关车试验时间" placeholder="请输入分钟" v-model="item.turnOnAndOffTime" type="number"
              :attr="{ maxlength: 8 }"
              :text="item.turnOnAndOffTime"><span style="color: #666">分钟</span><span style="color: red">*</span>
    </mt-field>

    <div v-on:click="seen4" v-on:closepop="closepop4">
      <mt-cell title="试飞员" :label="item.pilot" is-link><span style="color: red">*</span></mt-cell>
    </div>
    <!--<router-link :to="{ name: 'SelectMultiPage',params:{title:'选择工程师',data:dbItem.engineer}}">-->
    <div v-on:click="seen5" v-on:closepop="closepop5">
      <mt-cell title="试飞工程师"  :label="item.engineer" is-link><span style="color: red">*</span>
      </mt-cell>
    </div>
    <!--</router-link>-->


    <!--<mt-button type="primary" class="row" @click="editConfirm">确定</mt-button>-->

    <!--<SelectPage :datalist="dbItem.subject" titleD="科目" :popupVisible="subjectpopupVisible" @closepage="closepop"/>-->
    <SelectPage :datalist="dbItem.airport" @closeW="closeWindow" titleD="起飞机场" @close="closeAll" :popupVisible="startportpopupVisible" @closepage="closepop2"/>
    <SelectPage :datalist="dbItem.airport" @closeW="closeWindow" titleD="着陆机场" @close="closeAll" :popupVisible="endportpopupVisible" @closepage="closepop3"/>

    <SelectMultiPage :datalist="dbItem.pilot" @closeW="closeWindow" :popupVisible="politpopupVisible" :titleD="pilotTitle"
                     @closepage="closepop4"/>
    <SelectMultiPage :datalist="dbItem.engineer" @closeW="closeWindow"  :popupVisible="engineerpopupVisible" :titleD="engTitle"
                     @closepage="closepop5"/>

    <mt-datetime-picker
      ref="picker1"
      v-model="value1"
      @confirm="handleChange1">
    </mt-datetime-picker>
    <mt-datetime-picker
      ref="picker2"
      v-model="value2"
      @confirm="handleChange2">
    </mt-datetime-picker>

    <!--<el-dialog title="选择工程师" width="100%" :visible.sync="engineerpopupVisible">-->

    <!--<mt-checklist-->
    <!--align="right"-->
    <!--v-model="selectDatas"-->

    <!--:options="dbItem.engineer">-->
    <!--</mt-checklist>-->

    <!--<div slot="footer" class="dialog-footer">-->
    <!--<el-button @click="engineerpopupVisible = false">取 消</el-button>-->
    <!--<el-button type="primary" >确 定</el-button>-->
    <!--</div>-->
    <!--</el-dialog>-->
  </div>
</template>

<script>
  import SelectPage from './SelectPage'
  import SelectMultiPage from './SelectMultiPage'
  import axios from 'axios'
  import Global from './Global'

  export default {
    name: 'InputDetail',
    components: {SelectPage, SelectMultiPage},
    props: ['listId'],
    data () {
      return {
        dialogFormVisible: false,
        selectDatas: [],
        pilotTitle: '试飞员',
        engTitle: '试飞工程师',
        value1: null,
        value2: null,
        date1: null,
        date2: null,
        visible: false,
        dbItem: {
          aircraftType: [],
          aircraftNum: [],
          subject: [],
          airport: [],
          pilot: [],
          engineer: []
        },
        item: {
          subject: '',
          takeOffTime:
            '',
          landingTime:
            '',
          takeOffAirport:
            '',
          landingAirport:
            '',
          flightTime:
            '',
          pilot:
            '',
          turnOnAndOffTime:
            '',
          points:
            '',
          engineer:
            '',
        }
        ,
        // subjectpopupVisible: false,
        startportpopupVisible: false,
        endportpopupVisible: false,
        politpopupVisible: false,
        engineerpopupVisible: false,
      }
    },
    watch: {
      item: {
        handler (newValue, oldValue) {
          console.log('watch item')
          console.log(this.listId)
          this.item.key = this.listId
          var key = 'key' + this.listId
          // this.$store.state.addList[key]=this.item
          this.$store.commit('updateItem', this.item)

        },
        deep: true
      }
    },
    methods: {
      closeWindow(){
        // alert('closewindow')
        this.closeAll()
      },
      showmsb () {

      },
      handleChange1 (value) {
        // console.log(value)
        this.item.takeOffTime = value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + (value.getDate()) + ' ' + value.getHours() + ':' + value.getMinutes()
        this.date1 = value.valueOf()
      },
      handleChange2 (value) {
        this.item.landingTime = value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + (value.getDate()) + ' ' + value.getHours() + ':' + value.getMinutes()
        this.date2 = value.valueOf()

        if (this.item.takeOffTime != '' && this.item.landingTime != '') {
          let shijiancha = new Date(this.date2 - this.date1)
          console.log(this.date2)
          console.log(this.date1)
          console.log(shijiancha)
          /*天/时/分
          var days = shijiancha / 1000 / 60 / 60 / 24
          var daysRound = Math.floor(days)
          var hours = shijiancha / 1000 / 60 / 60 - (24 * daysRound)
          var hoursRound = Math.floor(hours)
          var minutes = shijiancha / 1000 / 60 - (24 * 60 * daysRound) - (60 * hoursRound)
          var minutesRound = Math.floor(minutes)
          var seconds = shijiancha / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound)
          // this.item.flightTime
          let s = ''
          if (daysRound > 0) {
            s += daysRound + '天 '
          }
          if (hoursRound > 0) {
            s += hoursRound + '时 '
          }
          s += minutesRound + '分 '
          console.log(s)

          this.item.flightTime = s
        }
      },
      */
//          以分为单位
          var minutes = shijiancha / 1000 / 60
          var minutesRound = Math.floor(minutes)
          // this.item.flightTime
          let s = ''
          s += minutesRound
          console.log(s)
          this.item.flightTime = s
        }
      },

      editConfirm () {
        let that = this
        this.item.id = this.listId
        axios.put(Global.serverSrc + '/fly/info/detail/one', this.item)
          .then(function (res) {
            console.log(res)
            Indicator.close()

            if (res.data.code === 0) {
              Toast({
                message: '表单提交成功',
                position: 'bottom'
              })
              that.$router.go(-1)
            } else if (res.data.code === 1) {
              Toast({
                message: res.data.msg,
                position: 'bottom'
              })
            } else {
              Toast({
                message: '表单提交失败',
                position: 'bottom'
              })
            }

          })
          .catch(function (err) {
            console.log(err)
            Indicator.close()
            Toast({
              message: '表单提交失败',
              position: 'bottom'
            })
          })
      },

      open (picker) {
        this.$refs[picker].open()
      },

      // seen1 () {
      //   // this.subjectpopupVisible = false
      //   this.startportpopupVisible = false
      //   this.endportpopupVisible = false
      //   this.politpopupVisible = false
      //   this.engineerpopupVisible = false
      //   this.subjectpopupVisible = true
      // },
      seen2 () {
        this.closeAll()
        this.startportpopupVisible = true
      },
      seen3 () {
        this.closeAll()
        this.endportpopupVisible = true
      },
      seen4 () {
        this.closeAll()
        this.politpopupVisible = true
      },
      seen5 () {
        this.closeAll()
        this.engineerpopupVisible = true
      },
      closepop (val) {
        this.subjectpopupVisible = false
        console.log(val)
        this.item.subject = val
      },
      closepop2 (val) {
        this.startportpopupVisible = false
        this.item.takeOffAirport = val
      },
      closepop3 (val) {
        this.endportpopupVisible = false
        this.item.landingAirport = val
      },
      closepop4 (val) {
        this.politpopupVisible = false
        this.item.pilot = val
      },
      closepop5 (val) {
        this.engineerpopupVisible = false
        this.item.engineer = val
      },

      handleChange (val) {
        console.log(val)
      },
      closeAll () {
        this.subjectpopupVisible = false
        this.startportpopupVisible = false
        this.endportpopupVisible = false
        this.politpopupVisible = false
        this.engineerpopupVisible = false
      }

    },
    created () {
      let dt = new Date()
      this.value1 = dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
      this.value2 = dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()

      // if (this.$route.params.item) {
      //   this.item=this.$route.params.item
      // }
      let urlItem = this.$route.params.item
      if (urlItem) {
        this.item = urlItem
      }

      let that = this
      axios({
        method: 'get',
        url: Global.serverSrc + '/fly/info/optional/names'
      }).then(function (resp) {
        console.log(resp.data)
        that.dbItem.aircraftType = resp.data.data.aircraftType
        that.dbItem.aircraftNum = resp.data.data.aircraftNum
        that.dbItem.subject = resp.data.data.subject
        that.dbItem.airport = resp.data.data.airport
        that.dbItem.pilot = resp.data.data.pilot
        that.dbItem.engineer = resp.data.data.engineer

      }).catch(resp => {
        console.log('请求失败：' + resp.status + ',' + resp.statusText)
      })

    }
  }
</script>

<style scoped>

</style>
